<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>repeat</title>
    <style>
        .code {
            margin: 20px;
        }

        .tip {
            color: darkorange;
        }
    </style>
    <script>
        
    </script>
</head>

<body>
</body>
<script type='module'>
    import{Nodom,Module} from '/dist/nodom.esm.min.js'
    export class MRepeat extends Module{
        template(){
            return `
            <div class="view">
                <h2> repeat指令</h2>
                <p>repeat指令用于对数组型数据进行渲染。
                <button e-click='pop'>pop</button>
                <button e-click='push'>push</button>
                <button e-click='addFood'>addFood</button>
                <button e-click='desc'>价格降序</button>
                <button e-click='asc'>价格升序</button>
                <button e-click='clear'>清空</button>
                <h3>基本使用</H3>
                <div class="code">
                    <for cond={{foods}} class='item' name={{name}}>
                        <span>菜名：{{name}}，价格：{{price}}</span>
                    </for>
                </div>
                
                <style>
                    .red{
                        color:red;
                    }
                    .blue{
                        color:blue;
                    }
                </style>
            </div>
            `
        }
        data(){
            return{
                foods: [{
                    name: '夫妻肺片',
                    price: 25
                }, {
                    name: '京酱肉丝',
                    price: 22
                }, {
                    name: '糖醋里脊',
                    price: 20
                }, {
                    name: '红烧茄子',
                    price: 12
                }, {
                    name: '口水鸡',
                    price: 18
                }, {
                    name: '水煮肉片',
                    price: 24
                }, {
                    name: '糖醋里脊2',
                    price: 21
                }],
            }    
        }
        top(arr){
            var a = [];
            for(let i=0;i<3;i++){
                a.push(arr[i]);
            }
            
            return a;
        }
        getOdd(arr){
            let a1 = [];
            for(let i=0;i<arr.length;i++){
                if(i%2){
                    a1.push(arr[i]);
                }
            }
            return a1;
        }
        sort1(arr){
            return arr.sort((a,b)=> a.price>b.price);
        }
        desc(model){
            model.foods.sort((a,b)=>a.price>b.price?-1:1)
        }
        asc(model){
            model.foods.sort((a,b)=>a.price>b.price?1:-1)
        }
        pop(model){
            model.foods.pop();
        }
        push(model){
            model.foods.push({name:'push菜单',price:50});
        }
        addFood(model){
            model.foods[2].name='更改2号元素'
            model.foods.splice(2,0,
                {
                    name: '新增1',
                    price: 20
                },
                {
                    name: '新增2',
                    price: 30
                }
            )

            
            
        }
        clear(model){
            delete model.foods;
            //清空后再push,pop会报错
            model.foods=[];
            console.log(model);
        }
    
        genCls(index){
            console.log(index);
            return index%2?'red':'blue'
        }
    }
    Nodom.app(MRepeat);
</script>
</html>